<template>
  <a-modal v-model:visible="visible" :title="title" :width="600" :mask-closable="false" @cancel="handleCancel">
    <a-form
      ref="FormRef"
      :model="formFields"
      :rules="formRules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item label="关键词名称" name="name">
        <a-input v-model:value="formFields.name" placeholder="请输入关键词名称" allow-clear></a-input>
      </a-form-item>

      <a-form-item label="电脑端倍数" name="pcRatio">
        <a-input v-model:value="formFields.pcRatio" placeholder="请输入电脑端倍数" allow-clear></a-input>
      </a-form-item>
      <a-form-item label="移动端倍数" name="wapRatio">
        <a-input v-model:value="formFields.wapRatio" placeholder="请输入移动端倍数" allow-clear></a-input>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button key="submit" type="primary" :loading="submitting" @click="handleSubmit"> 提交 </a-button>
      <a-button key="back" @click="handleCancel"> 取消 </a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { useVModel } from '@vueuse/core'
import type { FormInstance } from 'ant-design-vue'
import { toLabelValue } from '@/utils'
import { PatternEnum, PatternKeyMap } from '@/views/word-lib/interface'
import { omit } from 'lodash-es'
import type { WordLib } from '@/services/word-lib/getWordLib'
import { Mode } from '@/core/interfaces/common'
import { message } from 'ant-design-vue'
import tallCostaddus from '@/services/account-management/tallCostadd'
interface Props {
  show: boolean
  data: WordLib
  submitting: boolean
  mode: Mode
}

interface Emits {
  (e: 'on-submit'): void
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  mode: Mode.create,
  //   submitting: false,
  id: '',
  name: '',
  wapRatio: '',
  pcRatio: ''
})

const [, tallCostadd] = tallCostaddus()
const emit = defineEmits<Emits>()

const title = computed(() => {
  return props.mode === Mode.create ? '新增关键词' : '修改关键词'
})

//const businessLine = ref(toLabelValue(omit(BlKeyMap, BlEnum.ALL)));
const matchPattern = ref(toLabelValue(omit(PatternKeyMap, PatternEnum.ALL)))
const visible = useVModel(props, 'show')
const formFields = useVModel(props, 'data')
const FormRef = ref<FormInstance>()
const formRules = reactive({
  name: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入关键词名称'
    }
  ],
  pcRatio: [
    {
      required: true,
      trigger: 'change',
      message: '请输入电脑端倍数'
    }
  ],
  wapRatio: [
    {
      required: true,
      trigger: 'change',
      message: '请输入移动端倍数'
    }
  ]
})
async function handleSubmit() {
  //   console.log(formFields.value, '')

  if (props.mode === Mode.create) {
    let [err, res] = await tallCostadd(formFields.value)

    if (!err) {
      message.success(res.data.data)
      FormRef.value?.resetFields()
      visible.value = false
      emit('on-submits')
    }
  } else {
    FormRef.value?.validate().then(() => {
      emit('on-submit')
    })
  }
}

function handleCancel() {
  FormRef.value?.resetFields()
  visible.value = false
}
</script>

<script lang="ts">
export default { name: 'UpdateBusinessLine' }
</script>
